<template>
  <div class="wbsDetail">
    <div class="topInfo">
      <div class="flexBetweenCenter">
        <div class="title">
          <img style="margin-right:5px" src="@/assets/img/infoLogo.png" alt />
          <span>{{title}}</span>
        </div>

        <div class="editDelete">
          <a-dropdown-button>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="edit" />编辑
              </a-menu-item>
              <a-menu-item key="2">
                <a-icon type="delete" />删除
              </a-menu-item>
            </a-menu>
          </a-dropdown-button>
        </div>
      </div>

      <div class="infoContent">
        <div>
          <span class="infoContent_title">EBS编码</span>
          <span>00100101021010210211</span>
        </div>
        <div class="flexStart">
          <div class="infoContent_title" style="width:65px">分部分项</div>
          <div style="width:600px">江北明挖隧道工程/江北明挖暗埋段/支护结构/钻孔咬合桩</div>
        </div>
        <div>
          <span class="infoContent_title">构件类型</span>
          <span>高压旋喷桩加固</span>
        </div>
      </div>
    </div>
    <div class="workProcedure" style="font-size:14px">
      <div class="margin-bt15">工序</div>
      <div class="table">
        <a-table
          :columns="workColumns"
          :data-source="workData"
          :pagination="false"
          :customRow="rowClick"
        ></a-table>
      </div>
    </div>
    <div class="controlItems" style="font-size:14px">
      <div class="margin-bt15">
        管控项
        <span style="color:#f00">（请选择上方工序）</span>
      </div>
      <div class="table">
        <a-table :columns="controlColumns" :data-source="controlData" :pagination="false"></a-table>
      </div>
    </div>
  </div>
</template>

<script>
let workColumns = [
  {
    title: '工序编码',
    dataIndex: 'code',
    key: 'code',
    align: 'center'
  },
  {
    title: '工序名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center'
  },
  {
    title: '管控要求',
    dataIndex: 'require',
    key: 'require',
    align: 'center'
  }
]
let controlColumns = [
  {
    title: '专业',
    dataIndex: 'code',
    key: 'code',
    align: 'center'
  },
  {
    title: '管控项名称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  }
]
let workData = [
  {
    key: '1',
    code: '10',
    name: '钻孔',
    type: '一般工序',
    require: ''
  },
  {
    key: '11',
    code: '20',
    name: '成桩',
    type: '关键工序',
    require: 'xxxxxxx'
  }
]
let controlData = [
  {
    key: '1',
    code: '10',
    name: '钻孔'
  },
  {
    key: '11',
    code: '20',
    name: '成桩'
  }
]
export default {
  name: 'wbsDetail',
  data() {
    return {
      title: '高压旋喷桩加固',
      workColumns,
      controlColumns,
      workData,
      controlData
    }
  },
  methods: {
    handleMenuClick(e) {
      if (e.key == 1) {
      }
      if (e.key == 2) {
      }
    },

    // 点击行时
    rowClick(record, index) {
      return {
        on: {
          click: (e) => {
            console.log(record)
            if (record.key == '11') {
              this.controlData = [
                {
                  key: '1',
                  code: '10',
                  name: '成桩'
                },
                {
                  key: '11',
                  code: '20',
                  name: '成桩'
                }
              ]
            } else {
              this.controlData = [
                {
                  key: '1',
                  code: '10',
                  name: '钻孔'
                },
                {
                  key: '11',
                  code: '20',
                  name: '钻孔'
                }
              ]
            }
          }
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wbsDetail {
  font-size: 16px;
  color: #333;
}
::v-deep .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none;
}
.infoContent {
  font-size: 14px;
  margin-bottom: 25px;
}
.infoContent_title {
  margin-right: 30px;
  display: inline-block;
  width: 65px;
  color: #999;
}
.workProcedure {
  margin-bottom: 25px;
}
.margin-bt15 {
  margin-bottom: 15px;
}
</style>
